<template>
    <div class="main">
        <div class="left">
            <div class="user">
                <el-badge value="new" class="item"><el-avatar @click="ShowMessage"
                        style="border: 1px solid gray; cursor: pointer;" :size="180" :src="useTab.avatar" /></el-badge>

                <p class="username">{{ useTab.username }}</p>
            </div>
            <div class="card">
                <p class="text">选择头像</p>
                <div class="avater">
                    <el-avatar @click="selectLogo(index, item.img_url)" class="avater_logo"
                        v-for="(item, index) in logoUrl" :key="index" :src="item.img_url" :size="50" />
                </div>
            </div>
            <div class="card">
                <p class="text">修改用户名</p>
                <div style="display: flex">
                    <el-input v-model="useTab.username" placeholder="请输入用户名"></el-input>
                    <el-button :disabled="useTab.username === ''" @click="Changename"
                        style="font-weight: bold; margin-left: 10px">修 改</el-button>
                </div>
            </div>
            <div style="padding: 20px">
                <!-- <el-card style="height: 250px">
                    
                </el-card> -->
            </div>
            <div @click="LoginOut" style="
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 10px;
        ">
                <el-button circle size="large" icon="SwitchButton" type="danger" plain />
            </div>
        </div>

        <div class="content">
            <el-page-header @back="goBack">
                <template #content>
                    <span class="text"> {{useTab.username}}的主页 </span>
                </template>
            </el-page-header>
            <div>
                <p class="text">配置生成</p>
                <div style="margin-bottom: 20px">
                    <el-input v-model="price" style="width: 240px; " />
                    <el-button :disabled="assCard.length !== 0" @click="getAss"
                        style="font-weight: bold; margin-left: 10px">一 键 生
                        成</el-button>
                    <el-button @click="saveAss" :disabled="assCard.length == 0"
                        style="font-weight: bold; margin-left: 10px">保
                        存</el-button>
                    <el-button :disabled="assCard.length == 0" style="font-weight: bold; margin-left: 10px">修
                        改</el-button>
                    <el-button :disabled="assCard.length == 0" style="font-weight: bold; margin-left: 10px">清
                        除</el-button>
                </div>
                <el-card style="height: 500px; overflow-y: auto">
                    <el-space wrap :size="[70, 15]">
                        <el-card v-for="(item, index) in assCard" :key="index" style="min-width: 450px;">
                            <div class=" card">
                                <p class="text">{{ item.type }}</p>
                                <el-image style="width: 70px; height: 70px" :src="item.url" fit="cover"></el-image>
                                <p class="text">{{ item.title }}</p>
                                <p class="price">￥{{ item.price }}</p>
                            </div>
                        </el-card>
                    </el-space>
                </el-card>
            </div>
        </div>
        <div class="other">
            <el-tabs @tab-change="ChangeTabs" type="border-card" style="height: 100%; overflow-y: auto">
                <el-tab-pane label="评论">
                    <el-card shadow="never" v-for="(item, index) in comment.data" :key="index"
                        style="margin-bottom: 5px">
                        <div class="header">
                            <p class="type">{{ item.type === "ASS" ? "配置" : item.type }}</p>
                            <p class="time">{{ formatTimestamp(item.time) }}</p>
                        </div>
                        <div>
                            <p class="text">{{ item.content }}</p>
                        </div>
                    </el-card>
                </el-tab-pane>
                <el-tab-pane label="配置">
                    <el-card shadow="never" v-for="(item, index) in config" :key="index" style="margin-bottom: 5px;">
                        <div class="box">
                            <p class="title">{{ item.title }}</p>
                            <div>
                                <el-button type="primary" link>详情</el-button>
                                <el-button type="danger" link>删除</el-button>
                            </div>

                        </div>
                        <div class="box">
                            <el-image class="image" :src="item.ass_img.cpu_img" :zoom-rate="1.2" :max-scale="7"
                                :min-scale="0.2" :preview-src-list="[
                                    item.ass_img.cpu_img,
                                    item.ass_img.gpu_img,
                                    item.ass_img.mainboard_img,
                                    item.ass_img.hdd_img,
                                    item.ass_img.ssd_img,
                                    item.ass_img.memory_img,
                                ]" :initial-index="4" fit="cover" />
                            <p class="number">{{ item.score }}</p>
                            <p class="number">￥{{ item.price }}</p>

                        </div>
                    </el-card>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
    <el-dialog v-model="show" title="通知" width="500">
        <h1>信息通知</h1>
    </el-dialog>
</template>

<script setup lang="ts">
import { useTabStore } from "@/store/useTabStore";
import { onMounted, ref } from "vue";
import { getLogo, getUpdateUser } from "@/server/login/index";
import { useRouter, useRoute } from "vue-router";
import { ElNotification } from "element-plus";
import { getComment, getConfig } from "@/server/home/http";
import { formatTimestamp } from "@/utils/time";
import { getInfo } from "./price.ts"
import {
    getCPUDataById,
    getGPUDataById,
    getMainboardDataById,
    getMemoryDataById,
    getSSDDataById,
    getHDDDataById,
} from "@/server/assembly/index.ts";

const router = useRouter();
const route = useRoute();
const useTab = useTabStore();

const logoUrl = ref([]);
const comment = ref([]);
const config = ref([]);
const assCard = ref([])
const price = ref();
const show = ref(false);


onMounted(async () => {
    try {
        const [LogoInfo, commentInfo] = await Promise.all([
            getLogo(),
            getComment({ userId: route.query.id }),
        ]);
        logoUrl.value = LogoInfo;
        comment.value = commentInfo;
        // console.log(comment.value);
    } catch (error) {
        console.log(error);
    }
});

const selectLogo = (index, url) => {
    // console.log(index, url);

    const data = {
        id: useTab.userId,
        avatar: url,
    };
    // 更新用户头像
    getUpdateUser(data)
        .then((res) => {
            console.log(res);
            useTab.setAvatar(url);

            ElNotification({
                title: "头像",
                message: "修改成功",
                type: "success",
            });
        })
        .catch((err) => {
            console.log(err);
        });
};

const Changename = () => {
    const data = {
        id: useTab.userId,
        username: useTab.username,
    };
    getUpdateUser(data)
        .then((res) => {
            console.log(res);
            ElNotification({
                title: "用户名",
                message: "修改成功",
                type: "success",
            });
        })
        .catch((err) => {
            console.log(err);
        });
};

const LoginOut = () => {
    localStorage.removeItem("token");
    //清除用户信息
    useTab.setLoginStatus(false);
    useTab.setUserName("");
    useTab.setAvatar("");
    useTab.setUserId("");

    router.push("/login");
};

const ChangeTabs = (tab) => {
    if (tab === "1" && config.value.length === 0) {
        getConfig({ userId: route.query.id })
            .then((res) => {
                config.value = res.data.result;
                console.log(config.value);
            })
            .catch((err) => {
                console.log(err);
            });
    }
};

const getAss = async () => {

    if (price.value === '') {
        ElNotification({
            title: "价格",
            message: "请输入价格",
            type: "warning",
        });
        return
    }


    const bestAss = await getInfo(price.value);

    price.value = ''
    // console.log(bestAss);
    const { CPU, GPU, Center, Memory, SSD, HDD } = bestAss.configuration

    try {
        const [cpu, gpu, center, memory, ssd, hdd] = await Promise.all([
            // console.log(Center._id),

            getCPUDataById(CPU._id),
            getGPUDataById(GPU._id),
            getMainboardDataById(Center._id),
            getMemoryDataById(Memory._id),
            getSSDDataById(SSD._id),
            getHDDDataById(HDD._id)
        ])

        const data = [
            {
                type: "CPU",
                title: cpu.data.manufacturers + cpu.data.series + cpu.data.code_name,
                url: cpu.data.img_url_arr[0],
                price: cpu.data.price,
            },
            {
                type: "GPU",
                title: gpu.data.codeName,
                url: gpu.data.img_url_arr[0],
                price: gpu.data.price,
            },
            {
                type: "主板",
                title: center.data.series,
                url: center.data.img_url_arr[0],
                price: center.data.price,
            },
            {
                type: "内存",
                title: memory.data.manufacturers,
                url: memory.data.img_url_arr[0],
                price: memory.data.price,
            },
            {
                type: "硬盘",
                title: ssd.data.manufacturers,
                url: ssd.data.img_url_arr[0],
                price: ssd.data.price,
            },
            {
                type: "固态硬盘",
                title: hdd.data.manufacturers,
                url: hdd.data.img_url_arr[0],
                price: hdd.data.price,
            }
        ]

        assCard.value = data

    } catch (error) {
        console.log(error);

    }

};

const saveAss = () => {
    console.log(assCard.value);

}

const ShowMessage = () => {
    show.value = true
}

const goBack = () => {
    router.go(-1);
};
</script>

<style scoped lang="scss">
/* 隐藏所有滚动条 */
::-webkit-scrollbar {
    display: none;
}

.main {
    height: 100vh;
    display: flex;
    overflow-y: hidden;

    .left {
        width: 350px;
        overflow-y: auto;
        // background-color: #f0f0f0;
        padding: 20px 10px;

        .user {
            display: flex;
            flex-direction: column;
            align-items: center;

            .username {
                font-size: 22px;
                font-weight: 600;
            }
        }

        .card {
            .avater {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                flex-wrap: wrap;

                .avater_logo {
                    cursor: pointer;
                    margin: 10px;
                    border: 1px solid #7c7575;

                    &:hover {
                        border: 2px solid #005cff;
                    }
                }
            }

            .text {
                font-weight: bold;
                margin-bottom: 20px;
            }
        }
    }

    .content {
        flex: 1;
        padding: 20px;
        // background-color: aqua;

        .card {
            height: max-content;
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-around;
            cursor: pointer;



            .text {
                font-size: 12px;
                font-weight: 600;
            }

            .title {
                font-size: 12px;
                font-weight: 600;
                width: 200px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;

            }

            .price {
                font-size: 12px;
                font-weight: bold;
                color: #ff0000;
            }
        }
    }

    .other {
        padding: 10px;
        width: 450px;

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .time {
                font-size: 12px;
            }

            .type {
                font-size: 16px;
                font-weight: bold;
                color: #005cff;
            }
        }

        .text {
            font-size: 12px;
            font-weight: bold;
            letter-spacing: 1px;
            line-height: 2;
        }

        .box {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .title {
                font-size: 16px;
                font-weight: bold;
            }

            .image {
                width: 80px;
                height: 80px;
            }

            .number {
                font-size: 16px;
                font-weight: bold;
            }
        }


    }
}
</style>
